<template>
  <div class="play-page-lyric">
    <ul ref="list" :style="{ transform: `translateY(${-offsetH}px)` }">
      <li
        v-for="(item, index) in parsedLyric"
        :key="index"
        :class="{ active: index === currentLyric.index }"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["currentSong", "currentTime"],
  data: function () {
    return {
      lyric: "",
      offsetH: 0,
    };
  },

  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/lyric?id=" + this.currentSong.id)
      .then((res) => {
        console.log(res);
        this.lyric = res.data.lrc.lyric;

        // 获取到歌词之后下一帧
        this.$nextTick(function () {
          // 初次进入也 先滚动以下
          var h = [...this.$refs.list.querySelectorAll("li")]
            .slice(0, this.currentLyric.index)
            .reduce(function (total, element) {
              return total + Number(element.offsetHeight);
            }, 0);

          var offsetH;
          if (h < 572 / 2) {
            offsetH = 0;
          } else if (h > Number(this.$refs.list.offsetHeight) - 572 / 2) {
            offsetH = Number(this.$refs.list.offsetHeight) - 572;
          } else {
            offsetH = h - 572 / 2;
          }
          this.offsetH = offsetH;
        });
      });
  },

  mounted: function () {},
  methods: {
    parseLyric: function (strLyric) {
      return strLyric
        .split("\n")
        .filter((s) => s)
        .map((s) => {
          var yy = s.match(/^\[(\d{2}:\d{2}\.\d{2,3})\](.*)/);
          var timeArr = yy[1].split(":");
          return {
            time: timeArr[0] * 60 + timeArr[1] * 1,
            text: yy[2],
          };
        });
    },
    findLyric: function (parsedLyric, currentTime) {
      var lts = parsedLyric.filter((o) => o.time < currentTime);
      return {
        index: lts.length - 1,
        lyric: lts[lts.length - 1],
      };
    },
  },
  computed: {
    parsedLyric: function () {
      return this.parseLyric(this.lyric);
    },
    currentLyric: function () {
      return this.findLyric(this.parsedLyric, this.currentTime);
    },
  },

  watch: {
    "currentLyric.index": function (n) {
      // console.log(n);
      var h = [...this.$refs.list.querySelectorAll("li")]
        .slice(0, n)
        .reduce(function (total, element) {
          return total + Number(element.offsetHeight);
        }, 0);

      var offsetH;
      if (h < 572 / 2) {
        offsetH = 0;
      } else if (h > Number(this.$refs.list.offsetHeight) - 572 / 2) {
        offsetH = Number(this.$refs.list.offsetHeight) - 572;
      } else {
        offsetH = h - 572 / 2;
      }
      this.offsetH = offsetH;
    },

    "currentSong.id": function (newId) {
      this.axios
        .get("https://apis.netstart.cn/music/lyric?id=" + newId)
        .then((res) => {
          console.log(res);
          this.lyric = res.data.lrc.lyric;

          // 获取到歌词之后下一帧
          this.$nextTick(function () {
            // 初次进入也 先滚动以下
            var h = [...this.$refs.list.querySelectorAll("li")]
              .slice(0, this.currentLyric.index)
              .reduce(function (total, element) {
                return total + Number(element.offsetHeight);
              }, 0);

            var offsetH;
            if (h < 572 / 2) {
              offsetH = 0;
            } else if (h > Number(this.$refs.list.offsetHeight) - 572 / 2) {
              offsetH = Number(this.$refs.list.offsetHeight) - 572;
            } else {
              offsetH = h - 572 / 2;
            }
            this.offsetH = offsetH;
          });
        });
    },
  },
};
</script>

<style lang="less">
.play-page-lyric {
  flex: 1;
  overflow: hidden;
  margin: 10px 0 20px 0;
  // border: 1px solid red;
  ul {
    transition: all 0.3s;
    li {
      text-align: center;
      padding: 15px 0;
      color: rgba(80, 80, 80, 0.9);
      // transition: all 0.3s;
      // background: #000000 -webkit-linear-gradient(
      //     left,
      //     rgb(255, 255, 255),
      //     rgb(255, 255, 255)
      //   ) no-repeat 0 0;
      // -webkit-text-fill-color: transparent;
      // -webkit-background-clip: text;
      // background-size: 0 100%;
      &.active {
        color: #fff;
        font-size: 20px;
        // background-size: 100% 100%;
        // animation: scan 2s linear;
      }
    }
  }
}
// @keyframes scan {
//   0% {
//     background-size: 0 100%;
//   }
//   100% {
//     background-size: 100% 100%;
//   }
// }
</style>